<template>
  <div>
    <el-table :data="data" border :cell-style="{ 'vertical-align': 'top' }">
      <el-table-column width="50px">
        <template slot="header">
          <i
            class="el-icon-circle-plus add-icon"
            style="color:#21ba88;"
            @click="addRow"
          />
        </template>
        <template slot-scope="scope">
          <i
            class="el-icon-error delete-icon"
            style="color:#e92069;"
            @click="deleteRow(scope.row)"
          />
          <!-- <el-button class="select-btn" size="mini" type="primary" @click="deleteRow(scope.row)">删除</el-button> -->
        </template>
      </el-table-column>

      <el-table-column prop="prodBatch" label="药品信息" width="245x">
        <template slot-scope="scope">
          <div class="flex">
            <div class="font14">批准文号：</div>
            <el-input
              v-model="scope.row.approvalNum"
              size="mini"
              placeholder="请输入批准文号"
              style="width:140px;"
            />
          </div>
          <div class="flex margin-top">
            <div class="font14">商品名称：</div>
            <el-input
              v-model="scope.row.name"
              size="mini"
              placeholder="请输入商品名称"
              style="width:140px;"
            />
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="approvalNum" label="批准文号" width="140px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.approvalNum"
            size="mini"
            placeholder="请输入批准文号"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="商品名称" width="140px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.name"
            size="mini"
            placeholder="请输入商品名称"
          ></el-input>
        </template>
      </el-table-column> -->

      <el-table-column prop="niversalName" label="通用名称" width="200px">
        <template slot-scope="scope">
          <div class="flex">
            <div class="font14">名称：</div>
            <el-input
              v-model="scope.row.niversalName"
              size="mini"
              placeholder="请输入通用名称"
              style="width:120px;"
            />
          </div>
          <div class="flex margin-top-sm">
            <div class="font14">剂型：</div>
            <el-input
              v-model="scope.row.dosageFrom"
              placeholder="请选择剂型"
              size="mini"
              style="width:120px;"
              @focus="inputFocus(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="dosageFrom" label="剂型"  width="140px">
        <template slot-scope="scope">
          <el-input
            placeholder="请选择剂型"
            v-model="scope.row.dosageFrom"
            @focus="inputFocus(scope.row)"
             size="mini"
          >
          </el-input>
        </template>
      </el-table-column> -->
      <el-table-column prop="prodBatch" label="生产信息" width="250px">
        <template slot-scope="scope">
          <div class="flex">
            <div class="font14">生产厂家：</div>
            <el-input
              v-model="scope.row.prodFactory"
              size="mini"
              placeholder="请输入生产厂家"
              style="width:140px;"
            />
          </div>
          <div class="flex margin-top">
            <div class="font14">生产批号：</div>
            <el-input
              v-model="scope.row.prodBatch"
              size="mini"
              placeholder="请输入生产批号"
              style="width:140px;"
            />
          </div>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="prodFactory" label="生产厂家" width="140px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.prodFactory"
            size="mini"
            placeholder="请输入生产厂家"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column prop="prodBatch" label="生产批号" width="140px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.prodBatch"
            size="mini"
            placeholder="请输入生产批号"
          ></el-input>
        </template>
      </el-table-column> -->
      <el-table-column prop="dosage" label="用法用量" width="320px">
        <template slot-scope="scope">
          <div class="dosage">
            <span class="font14">用 量：</span>
            <el-input
              v-model="scope.row.dosage"
              class="dosage-input"
              size="mini"
            />
            <el-input
              v-model="scope.row.dosageUnit"
              class="dosage-input"
              placeholder="单位"
              size="mini"
            />
            <!--<el-select
              class="dosage-select"
              v-model="scope.row.dosageUnit"
              size="mini"
              placeholder="单位">
              <el-option
                v-for="unit in options.dosageUnit"
                :key="unit.value"
                :value="unit.value"
              ></el-option>
            </el-select>-->
            <el-input
              v-model="scope.row.dosageDay"
              class="dosage-input"
              size="mini"
            >
              <span slot="suffix" class="text-df" style="color:#000;">
                日
              </span>
            </el-input>
            <el-input
              v-model="scope.row.dosageRate"
              class="dosage-input"
              size="mini"
            >
              <span slot="suffix" class="text-df" style="color:#000;">
                次
              </span>
            </el-input>
          </div>

          <div class="margin-top-sm">
            <span class="font14">给药途径：</span>
            <el-input
              v-model="scope.row.drugRoute"
              placeholder="给药途径"
              style="width: 200px;"
              size="mini"
            />
            <!--<el-select v-model="scope.row.drugRoute" size="mini" style="width: 222px;">
              <el-option
                v-for="route in options.drugRoute"
                :key="route.value"
                :value="route.value"
              ></el-option>
            </el-select>-->
          </div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="drugRoute" label="给药途径">
        <template slot-scope="scope">
          <el-select v-model="scope.row.drugRoute" size="mini">
            <el-option
              v-for="route in options.drugRoute"
              :key="route.value"
              :value="route.value"
            ></el-option>
          </el-select>
        </template>
      </el-table-column> -->
      <el-table-column :prop="date" label="用药起止时间" width="250px">
        <template slot-scope="scope">
          <div class="drug-date">
            <span class="font14">从：</span>
            <el-date-picker
              v-model="scope.row.startDate"
              size="mini"
              class="drug-date-input"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 220px;"
            />
          </div>
          <div class="drug-date mr-t">
            <span class="font14">到：</span>
            <el-date-picker
              v-model="scope.row.endDate"
              size="mini"
              class="drug-date-input"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              style="width: 220px;"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="reason" label="用药原因" width="220px">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.reason"
            type="textarea"
            size="mini"
            rows="3"
          />
        </template>
      </el-table-column>

    </el-table>

    <el-dialog
      title="选择剂型信息"
      append-to-body
      destroy-on-close
      :visible.sync="dialogVisible"
    >
      <div class="dosage-container">
        <el-collapse>
          <el-collapse-item
            v-for="dosageType in options.dosageFrom"
            :key="dosageType.value"
            :title="dosageType.label"
            :name="dosageType.value"
          >
            <div class="dosage-table">
              <div
                v-for="dosage in dosageType.children"
                :key="dosage.value"
                :class="
                  `dosage-table-item ${
                    currentSelectDosage.some((item) => item === dosage.label)
                      ? 'dosage-table-item-acitve'
                      : ''
                  }`
                "
                @click="selectDosage(dosage)"
              >
                {{ dosage.label }}
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import options from './options'
export default {
  props: ['data', 'addDrugRow', 'delSuspectedDrug', 'changeModels', 'type'],
  data() {
    return {
      dialogVisible: false,
      options: options,
      currentSelectDosage: [],
      currentRow: [],
      date: ''
    }
  },
  watch: {
    data: {
      deep: true,
      handler() {
      }
    }
  },
  methods: {
    addRow() {
      this.$emit('addDrugRow', this.type)
    },
    deleteRow(row) {
      this.$emit('delSuspectedDrug', row, this.type)
    },
    inputFocus(row) {
      this.currentRow = row
      if (row.dosageFrom) {
        this.currentSelectDosage = row.dosageFrom.split(',')
      } else {
        this.currentSelectDosage = []
      }
      this.dialogVisible = true
    },
    selectDosage(dosage) {
      if (this.currentSelectDosage.some((item) => item === dosage.label)) {
        // this.currentSelectDosage = this.currentSelectDosage.filter((item) => item !== dosage.label);
        this.currentSelectDosage = []
      } else {
        // this.currentSelectDosage.push(dosage.label);
        this.currentSelectDosage = [dosage.label]
      }
    },
    dialogOk() {
      this.$emit(
        'changeModels',
        this.currentRow.num,
        this.currentSelectDosage,
        this.type
      )
      this.dialogVisible = false
    }

  }
}
</script>

<style lang="scss" scoped>
.add-icon {
  color: #409eff;
  font-size: 20px;
  cursor: pointer;
  transform: translateY(2px);
}
.delete-icon {
  color: rgb(198, 52, 32);
  font-size: 20px;
  cursor: pointer;
}
.select-btn {
  padding: 7px 7px;
  margin-left: 0;
}
.drug-date {
  display: flex;
  margin-top: 5px;
  .mr-t {
    margin-top: 5px;
  }
  .drug-date-input {
    width: 120px;
  }
}
.dosage {
  display: flex;
  .dosage-input {
    width: 50px;
    input {
      padding: 0 5px;
    }
  }
}
.dosage-container {
  max-height: 500px;
  overflow-y: auto;
  .dosage-table {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    display: flex;
    flex-wrap: wrap;
    .dosage-table-item {
      width: 20%;
      height: 40px;
      line-height: 40px;
      border-right: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 0 10px;
      cursor: pointer;
      &:hover {
        background: #1989fa;
        color: #fff;
        opacity: 0.5;
      }
      &.dosage-table-item-acitve {
        background: #1989fa;
        color: #fff;
      }
    }
  }
}
</style>
<style lang="scss">
.dosage {
  display: flex;
  .dosage-select {
    width: 80px;
    margin-left: 5px;
  }
  .dosage-input {
    width: 50px;
    margin-left: 5px;
    .el-input__inner {
      padding: 0 5px;
    }
  }
}
</style>
